<script setup>
import { ref } from "vue";
import { useUserStore, useAppStore } from "@/store";
const { setToken } = useUserStore();
const { statusBarHeight, safeAreaTop } = useAppStore();
import { useRouter } from "simpleRouter";
const router = useRouter();

const form = ref({
  account: "test",
  password: "test",
});
const submit = () => {
  const { account, password } = form.value;
  if (!account) {
    uni.showToast({
      title: "请输入账号",
      icon: "error",
      duration: 2000,
    });
    return;
  }
  if (!password) {
    uni.showToast({
      title: "请输入密码",
      icon: "error",
      duration: 2000,
    });
    return;
  }
  setToken("token");
  router.replaceAll({ path: "/" });
};
</script>

<template>
  <view
    class="container"
    p-10
    :style="`padding-top: ${statusBarHeight + safeAreaTop + 30}px;`"
  >
    <view mb-4>
      <uv-input
        placeholder="请输入账号"
        border="surround"
        v-model="form.account"
      />
    </view>
    <view mb-6>
      <uv-input
        placeholder="请输入密码"
        border="surround"
        v-model="form.password"
        password
      />
    </view>
    <uv-button
      type="primary"
      text="提交"
      customStyle="margin-top: 10px"
      @click="submit"
    />
  </view>
</template>

<style lang="scss" scoped>
.container {
  padding: 20upx;
  box-sizing: border-box;
}
</style>
